<template>
  <van-field v-model="checkedData[EL_CONFIG.viewKey]" readonly v-bind="{...EL_CONFIG}" @click="showSearch" class="van-hairline--bottom"/>
  <van-field v-model="VALUE_" readonly style="display:none"/>
  
  <DictPicker v-bind="{...PICKER_CONFIG}" v-model="showPicker" @onConfirm="onPickerConfirm" @onClose="onPickerClose" @onLoaded="onDataLoad"></DictPicker>
</template>

<script setup>
import { ref, reactive, watch, computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import DictPicker from './DictPicker'
import { useRequestList } from '@/mixins/useRequestList';


const props = defineProps({
  modelValue: {
    type: String,
    default: '',
  },
  // 字典组件配置
  pickerConfig: {
    type: Object,
    default: () => ({}),
  },
  // 外层触发组件配置 （默认为van-field相关配置）
  elConfig: {
    type: Object,
    default: () => ({}),
  },
  disabled: {
    type:Boolean,
    default: false
  }
});

const emit = defineEmits(["update:modelValue", 'onChange', 'onDataLoad']);
const showPicker = ref(false)

const EL_CONFIG = computed(() => ({
  ...{
    label: '',
    clickable: true,
    inputAlign: 'right',
    placeholder: '请选择',
    border: false,
    valueKey: 'dictValue',
    viewKey: 'dictLabel'
  },
  ...props.elConfig,
}))

const PICKER_CONFIG = computed(() => ({
  ...{
    title: '请选择'
  },
  ...props.pickerConfig
}))

const VALUE_ = computed({
  get: () => props.modelValue,
  set: val => {
    emit("update:modelValue", val);
  },
});

const checkedData = ref({})

// watch(
//   () => visible.value,
//   val => {
//     if(!!val) {
//       onRefresh(getDeptLeader, {type: 1}, false)
//     }
//   },
//   {
//     immediate: true//立即监听--进入就会执行一次 监听显影状态
//   }
// );

function showSearch() {
  if(!!props.disabled) return;
  showPicker.value = true
}

function onPickerConfirm(data) {
  checkedData.value = data.value;
  showPicker.value = false
  emit("update:modelValue", data.value[EL_CONFIG.value.valueKey])
  emit("onChange", data.value)
}

function onPickerClose() {
  checkedData.value = {}
}

function onDataLoad(data) {
   emit("onDataLoad", data)
}

defineExpose({})

</script>
<style scoped lang='scss'>
</style>